<template>
  <div class="receivableslist">
      <div class="mask" v-show="imgbackground" @click="netshow">
          <div class="imgmask">
              <img class="imgs" :src="imgurl" alt="">
          </div>
      </div>
      <div class="priceheader">
            <div class="titletop">
                <div class="receiveablesprice">
                    <p class="price">
                        <span class="price_icon">¥</span>
                        <span class="price_num">{{data.totalPrice}}</span>
                    </p>
                     <p class="needpay">待支付:¥{{data.totalUnpayPrice}}</p>
                </div>
                <div  class="receiveabletitle">
                   <div  class="showtite">四通易达<span>{{data.shareName}}</span>向您发起一笔收款，请及时支付…</div>
                    感谢您一直以来的支持与信任，<br>
                    我们会继续努力提供更优质的服务！ 
                </div>
                <span class="bddleft"></span>
                <span class="bddright"></span>
            </div>
            <div class="detailshow">
               <div class="detail_title">订单明细</div>
               <div class="order_item" v-for="(item,index) in data.orderInfos" :key="index">
                   <div class="order_left">
                       <img src="@/assets/img/编组.png" alt="">
                   </div>
                   <div class="order_center">
                       <p class="center_address">
                           <span>{{item.fromCity}}</span>——<span>{{item.toCity}}</span>
                       </p>
                       <p class="center_number">
                           订单号：<span>{{item.orderNumber}}</span>
                       </p>
                   </div>
                   <div class="order_right">
                       <div class="right_price">
                           ¥{{item.totalPrice}}
                       </div>
                       <div class="right_time">
                           {{item.orderDate}}
                       </div>
                   </div>
               </div>
            </div>
      </div>
      <div class="redayreceivables">
          <button  class="confirm" @click="redprice">{{paystate? "确认无误，去支付": "账单已支付"}}</button>
      </div>
  </div>
</template>

<script>
/* eslint-disable */
import Vue from "vue"
import {getinfoshare} from "@/api/getinfoshare";
import {paybill} from "@/api/paybill";
import { share } from '@/api/orderlist';
import {getUserCode ,getappid,getopenid} from "@/api/getusercode";

export default {
       
    mounted() {
        window.document.title = "四通易达";
        let  iswx= (function(){
            return navigator.userAgent.toLowerCase().indexOf('micromessenger') !== -1;
        })();
        if(iswx){
            //设置支付模式
            this.payMode="JSAPI";
            //
            this.isapi=true;
            
            //设置请求支付的参数
            let parm = {
                appid:"",
                redirect_uri: encodeURIComponent(`${Vue.prototype.$conf.domainname}/?#/receivables?id=${window.location.href.split("?id=")[1].split("&")[0]}`),
                response_type:"code"
            }
            //获取appid
            getappid().then(res=>{
                if(res.code==200) {
                    parm.appid  = res.data;
                    let url =window.location.href;
                    if(url.split("code")[1]==undefined){
                        window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${parm.appid}&redirect_uri=${parm.redirect_uri}&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect`;
                    } else {
                        this.code = url.split("code=")[1].split("&")[0];
                    }
                }
            })
                this.shareshows();

        } else {
            this.payMode="MWEB"
            this.shareshows();
        };       
},
    data() {
        return {
               urls:"",
               shows:false,
               username:"",
               id:"",
               imgbackground:false,
               data:{},
               payMode:"",
               imgurl:"",
               paystate:"",
               isapi:false,
               code:"",
               payId:""
            
        };
    },
    methods:{
        redprice() {
            if(this.paystate) {
                if(this.shows){
                    return false;
                }
            this.shows = true;
            if(!this.isapi) {
             let pams = {
                "businessId":this.urls,
                // "openId":'',
                'payMode':this.payMode
            };

            paybill(pams).then(res=>{
                if(res.code == 200) {
                    window.location.href =res.data.payCreateData.codeUrl;
                } 
            });
            } else {
                let pams = {
                "businessId":this.urls,
                'payMode':this.payMode,
               };
               if(!localStorage.getItem("openId")) {
                   pams.code = this.code
               } else {
                   pams.openId = localStorage.getItem("openId");
               }
             paybill(pams).then(res=>{
                console.log("获取交易单号和openid");
                console.log(res);
                if(res.code == 200) {
                    localStorage.setItem("openId",res.data.payCreateData.openId);
                    this.payId = res.data.payId;
                    if (typeof WeixinJSBridge == "undefined"){
                        if( document.addEventListener ){
                            document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                        }else if (document.attachEvent){
                            document.attachEvent('WeixinJSBridgeReady', onBridgeReady); 
                            document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                        }
                    }else{
                        this.onBridgeReady(res);
                    }
                } 
            });
            }
            
            this.shows = false;
        }
         },
         onBridgeReady(res){
            WeixinJSBridge.invoke(
                'getBrandWCPayRequest', {
                    "appId":res.data.payCreateData.appId,     //公众号名称，由商户传入     
                    "timeStamp":res.data.payCreateData.timeStamp,         //时间戳，自1970年以来的秒数     
                    "nonceStr":res.data.payCreateData.nonceStr, //随机串     
                    "package":res.data.payCreateData.package,     
                    "signType":res.data.payCreateData.signType,         //微信签名方式：     
                    "paySign":res.data.payCreateData.paySign, //微信签名 
                    "openId":this.openId
                },
                function(res){
                    console.log(res);
                    if(res.err_msg == "get_brand_wcpay_request:ok" ){
                        // 使用以上方式判断前端返回,微信团队郑重提示：
                        //res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。
                        location.reload();
                    }else{
                        alert("支付状态有延迟，若已支付成功，可直接点击页面右上角，刷新页面即可");
                    }
                }); 
            },

         netshow() {
             
          this.imgbackground = false;
     },
     shareshows() {
        let windowurls = window.location.href.split("?id=")[1].split("&")[0];
        this.urls = windowurls;
        getinfoshare(windowurls).then(res => {
            this.paystate = res.data.payState;
            this.username = res.data.shareName;
            this.id = res.data.shareBillId;
            this.data = res.data;
        });
        let url = window.location.href.split('#')[0];


        url = encodeURIComponent(url);
        //这里是封装的axios，换成任意请求皆可
        let that = this;
        share(url) .then(res => {
            wx.config({
                // 配置信息, 即使不正确也能使用 wx.ready
                debug: false,
                appId: res.data.appid,
                timestamp: res.data.timestamp,
                nonceStr: res.data.noncestr,
                signature: res.data.sign,
                jsApiList: [
                            'updateAppMessageShareData',
                            'updateTimelineShareData'
                            ]
            });
            
            setTimeout(() => {
                wx.ready(function() {
                    let wxData = {
                        title: '四通易达', // 分享标题
                        desc: `您的好友${that.username}向您发起一笔收款，请及时支付`, // 分享描述
                        link: Vue.prototype.$conf.domainname+`/#/receivables?id=${that.id}`, 
                        imgUrl: 'https://lecarlinkoss.oss-cn-beijing.aliyuncs.com/media/wx/zt/hz/4c53c879309e46ba89dd3cd7fa0d7e43.png', // 分享图标
                    }
                    
                    //需在用户可能点击分享按钮前就先调用
                    wx.updateAppMessageShareData(wxData);
                    wx.updateTimelineShareData(wxData);
                });
            }, 700);
        });

     }
    },
    
    
};
</script>

<style lang="scss"> 
.receivableslist {
    width: 100%;
    height: 100%;
    display: flex;
    // align-items: center;
    justify-content: center;
    background: #EDEDED;
    position: relative;
    .priceheader{
        margin-top: 20px;
        width: 343px;
        height: 508px;
        background: #ffffff;
        display: flex;
        flex-direction: column;
       
        .titletop {
            width: 100%;
            height: 160.5px;
            border-bottom: 1px dashed #999999;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .bddleft{
                position: absolute;
                left: -10px;
                bottom: -12px;
                width: 25px;
                height: 25px;
                background: #EDEDED;
                border-radius: 50%;
            }
            .bddright{
                position: absolute;
                right: -10px;
                bottom: -12px;
                width: 25px;
                height: 25px;
                background: #EDEDED;
                border-radius: 50%;
            }
            .receiveablesprice {
                flex:1;
                padding-top: 20px;
                font-weight: bolder;
                justify-content: center;
                .price{
                    font-size: 16px;
                    text-align: center; 
                    .price_icon{
                        position: relative;
                        top: -9px;
                        right: 3px;
                    }
                    .price_num{
                        font-size: 30px;
                    }
                }
            }
            .receiveabletitle {
                flex: 2;
                line-height: 16px;
                margin-top: 10px;
                font-size: 12px;
                color: #666666;
                text-align: center;
            }
        }
        .detailshow {
            overflow: auto;
            .detail_title{
                font-size: 15px;
                font-weight: bold;
                padding: 19.75px 10px 0 15px;
            }
            .order_item{
                width: 90%;
                height: 62.5px;
                margin: 0 auto;
                border-bottom: 1px solid #EFEFEF;;
                display: flex;
                padding-bottom: 10px;
                .order_left{
                    flex: 1;
                    img{
                        width: 10px;
                        height: 11px;
                        margin-left: 10px;
                    }
                }
                .order_center{
                    flex: 6;
                    padding: 10px;
                    .center_address{
                        font-size: 12px;
                        color: #333333;
                    }
                    .center_number{
                        line-height: 50px;
                        font-size: 12px;
                        color: #999999;
                        letter-spacing: 0;
                    }
                }
                .order_right{
                    flex: 3;
                    padding: 10px;
                    text-align: right;
                    .right_price{
                        font-size: 14px;
                        color: #333333;
                    }
                    .right_time{
                        font-size: 12px;
                        color: #999999;
                        line-height: 50px;
                    }
                }
            }
        }
    }
    .redayreceivables{
        width: 100%;
        height: 60px;
        background: #ffffff;
        position: absolute;
        left:0;
        bottom: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        .confirm{
            margin: 0 auto;
            width: 90%;
            height: 80%;
            background: #FF6540;
            border: none;
            color: #ffffff;
            font-size: 18px;
            text-align: center;
            z-index: 1000000000;
            cursor: pointer;
        }
    }
}
.showtite {
    width: 246px;
    margin-left: 49px;
}
.needpay{
         font-size: 12px;
            color: red;
            text-align: center;
            margin-top: 3px;
            padding-left: 12px;
}
.mask{
    width: 100%;
    height: 100%;
    z-index: 100;
    background: rgba(0, 0,0,.5);
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    .imgmask {
        width: 100%;
        height: 300px;
        display: flex;
        justify-content: center;
        align-items: center;
       .imgs{
           width: 90%;
           height: 100%;
       }
    }
}
</style>